<template>
  <div class="wrapper">
    <v-head @navChange="navChange"></v-head>
    <div :style="note">
      <v-sidebar :sideNav="sideNav"></v-sidebar>
      <div class="content-box" :class="{ 'content-collapse': collapse }">
        <!-- <v-tags></v-tags> -->
        <div class="content">
          <transition name="move" mode="out-in">
            <keep-alive>
              <router-view v-if="isRouterAlive"></router-view>
            </keep-alive>
          </transition>
        </div>
      </div>
      <!-- <div class="home_footer">
				<p>© 2020 电信库存管理系统</p>
			</div> -->
    </div>
  </div>
</template>

<script>
import vHead from "@/views/frame/Header.vue";
import vSidebar from "@/views/frame/Sidebar.vue";

export default {
  data() {
    return {
      collapse: false,
      sideNav: -1,
      isRouterAlive: true,
    };
  },
  computed: {
    note: function () {
      return {
        background: this.$store.state.visible.bgWhite
          ? "#fff"
          : "url(" +
            require("assets/image/welcome.jpg") +
            ") 100% 100% no-repeat",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
        height: "100%",
        position: "relative",
        "overflow-y": "hidden",
      };
    },
  },
  provide() {
    return {
      reload: this.reload,
    };
  },
  components: {
    vHead,
    vSidebar,
  },
  created() {
    this.bus.$on("collapse", (msg) => {
      this.collapse = msg;
    });
    // this.$router.push({
    // 	path: "/dashboard",
    // 	params: {}
    // });
  },
  methods: {
    /**@augments id 一级菜单的id
     * 一级菜单修改，联动改变二级菜单
     */
    navChange(id) {
      let secNavId = sessionStorage.getItem("secNavId");
      if (secNavId) {
        this.sideNav = secNavId;
      } else {
        this.sideNav = id;
      }
    },
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(function () {
        this.isRouterAlive = true;
      });
    },
  },
};
</script>